import React, { MouseEvent } from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import styles from './page-header.less';
import { Avatar, Input, Icon } from 'antd';
import { Utility } from '@/utils/Utility';
import { PageHeaderDataObservable } from '../../models/PageHeaderDataObservable';
import { Session } from '@/service/Session';
import { Link } from 'umi';
import { WebVariable } from '@/service/WebVariable';

@observer
export class PageHeader extends React.Component<IHeaderProps> {
  @observable private searching = false;
  @observable private searchText = '';
  private headerData = PageHeaderDataObservable.singleton();
  private cookie = Session.getCookie();

  render() {
    const avatar = this.cookie?.avatar;
    const projectTitle =
      location.pathname.indexOf('biz-portals') != -1
        ? WebVariable.emptyProejctTitle
        : this.headerData.projectTitle;
    return (
      <div className={styles.headerIndex}>
        <div className={styles.logo}>
          <img src={require('@/layouts/biz_layouts/icon/logo.png')} />
        </div>

        <div style={{ padding: '2px 0 0 0' }}>&nbsp;</div>

        <div className={styles.menu}>
          <div className={styles.menuList}>
            <div className={styles.title}>
              <Link id="project_title" to="/biz-portals/">
                {projectTitle}
              </Link>
            </div>
          </div>
        </div>
        <div className={styles.admin}>
          <div className={styles.searchbox}>
            <Input
              placeholder="搜索项目或菜单"
              prefix={<Icon type="search" />}
              suffix={this.searching ? <Icon type="loading" /> : ''}
              value={this.searchText}
              onChange={e => {
                this.searching = true;
                this.searchText = e.currentTarget.value;
                Utility.debounce(() => this.beginSearch());
              }}
            />
          </div>
          <div onClick={event => this.props?.onAvatarClick?.(event)}>
            {typeof avatar != 'undefined' && avatar.length > 1 ? (
              // <Avatar size="default" src={avatar} /> :
              // <Avatar size="default" icon="user" />
              <Avatar src={require('@/layouts/biz_layouts/icon/default.png')} />
            ) : (
              <Avatar src={require('@/layouts/biz_layouts/icon/default.png')} />
            )}
          </div>
        </div>
      </div>
    );
  }

  private beginSearch() {
    const key = this.searchText.trim();
    this.searchText = key;
    this.searching = false;
    console.log(key);
  }
}

export interface IHeaderProps {
  onAvatarClick?: (event: MouseEvent<HTMLDivElement>) => void;
}
